<template>
  <div class="waterMeterLeftTree">
    <div class="title">
      <span>选择小区</span>
      <button class="titleButton" @click="clickLeft">
        <i class="el-icon-caret-left"></i>
      </button>
    </div>
    <div class="search">
      <el-input placeholder="请输入关键字" v-model="filterText" class="searchFont" clearable>
      </el-input>
      <!-- <i class="el-icon-d-caret"></i> -->
      <button class="searchButton" @click="changeDefault">
        <i class="el-icon-d-caret"></i>
      </button>
      <!-- <i class="el-icon-caret-top"></i> -->
    </div>
    <!-- {{areaData}} -->
    <el-tree class="filter-tree" :data="areaData" :props="defaultProps" :default-expand-all="defaultTree" :filter-node-method="filterNode" node-key="id" @node-click="handleNodeClick" ref="tree">
      <!-- icon-class='el-icon-folder' -->
    </el-tree>
  </div>
</template>

<script>
import {
  getTree, //区域树--小区资料全部
} from '@/api/baseManage/flCommunity/index'
export default {
  name: 'waterMeterLeftTree',
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },

  methods: {
    forAll(arr, isExpand) {
      arr.forEach((i) => {
        this.$refs.tree.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.forArr(i.children, isExpand)
        }
      })
    },
    expandAll() {
      this.forAll(this.areaData, true)
    },
    collapseAll() {
      this.forAll(this.areaData, false)
    },
    handleNodeClick(a, b, c) {
      // console.log(a,b,c,999);
      // this.$emit('areaClickOn','点击项')
      this.$emit('areaIf', a.code)
    },
    // 点击按钮
    clickLeft() {
      this.$emit('clickClose', '点击隐藏')
    },
    // 获取树资料
    async getTreeData() {
      const res = await getTree()
      // console.log(res);
      this.areaData = res.data
      this.changeLabel(this.areaData)
    },
    // 转为label
    changeLabel(arr) {
      arr.forEach((item) => {
        for (var key in item) {
          if (key === 'name') {
            item['label'] = item[key]
            delete item[key]
          }
          if (key === 'children') {
            var arr1 = item[key]
            this.changeLabel(arr1)
          }
        }
      })
    },
    // 刷新树
    // buildTree(){
    //     for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
    //         this.$refs.tree._getAllNodes()[i].expanded = this.defaultTree
    //     }
    // },
    //   改变展开
    changeDefault() {
      let defaultTree = this.defaultTree
      console.log(this.defaultTree)

      this.defaultTree = !defaultTree
      // 测试。。。。。。。。。。。。。。。。。测试
      this.forAll(this.areaData, defaultTree)
      // this.buildTree()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
  },
  created() {
    this.getTreeData()
  },

  data() {
    return {
      //   显示开关
      //   小区资料数据
      areaData: [],
      //   展开开关
      defaultTree: true,
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.waterMeterLeftTree {
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 2px;
  height: 100vh;
  .title {
    height: 48px;
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
    font-size: 15px;
    // font-weight: 700;
    padding: 10px 10px 0px 10px;
    // .el-icon-caret-left{
    //     float:right;
    //     margin-right: -10px;
    // }
    .titleButton {
      width: 12px;
      height: 18px;
      border: 0;
      padding: 0;
      float: right;
      margin-right: -10px;
      .el-icon-caret-left {
        margin: -10px 0px 0px 0px;
        font-size: 16px;
        width: 12px;
        height: 18px;
      }
    }
  }
  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    .searchFont {
      margin: 10px;
      /deep/.el-input__inner {
        width: 166px;
        height: 24px;
      }
    }
    .searchButton {
      border: 0;
      padding: 0;
      float: right;
      .el-icon-d-caret {
        margin: 0;
      }
    }
  }
}
</style>
